<template>
	<u-navbar title="我要反馈" :autoBack="true" :border-bottom="false" bg-color="#00757f" title-color="white" left-icon-color="white"></u-navbar>

	<view class="feedback-container">
		<view class="feedback-title">
			<text>我要反馈</text>
			<text class="feedback-desc">感谢您对平台的支持，我们会尽快处理</text>
		</view>

		<u-form ref="feedbackForm" :model="form" :rules="rules" show-message="false">
			<u-form-item label="姓名" required="true" prop="userInfo.name" label-width="80" border-bottom="true">
				<u-input  v-model="form.name" border="none" inputAlign="right" placeholder="请输入姓名" />
			</u-form-item>

			<u-form-item label="联系信息"  required="true" prop="contact" border-bottom="true" label-width="80">
				<u-input v-model="form.contact" border="none" type="number" inputAlign="right" placeholder="请输入联系信息" />
			</u-form-item>

			<u-form-item label="类型"  required="true" border-bottom="true" prop="type" label-width="80">
				<up-picker 
				:show="showTypePicker" 
				:columns="columns" 
				keyName="label" 
				:closeOnClickOverlay="true"
				@close="showTypePicker = false" 
				@confirm="confirm" 
				@cancel="showTypePicker = false"></up-picker>
				<view @click="showTypePicker = true">
					<u-input 
					v-model="form.type" 
					placeholder="请选择类型" 
					border="none" 
					inputAlign="right"
					suffixIcon="arrow-right" 
					style="pointer-events: none" 
					disabled 
					disabledColor="white"></u-input>
				</view>
			</u-form-item>
			<u-form-item prop="description" label="描述"  required="true" label-width="45" labelPosition="top" >
			  <up-textarea v-model="form.description"  placeholder="请输入描述" style="margin-top: 10px;"></up-textarea>
			</u-form-item>

			<u-form-item label="上传图片" label-width="80" labelPosition="top">
				<u-upload :action="uploadAction" :file-list="fileList" :max-count="1" @after-read="afterRead" style="margin-top: 10px;">
					<view class="upload-placeholder">
						<u-icon name="plus" size="40" color="#999"></u-icon>
					</view>
				</u-upload>
			</u-form-item>
		</u-form>

		<view class="submit-btn">
			<u-button type="primary"  text="我要反馈" @click="submitFeedback" color="#00757f"></u-button>
		</view>
		
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

const uToastRef = ref(null)
	const form = reactive({
		name: '',
		contact: '',
		type: '',
		description: '',
	});

	const rules = {
		name: [
		    { 
		      required: true, 
		      validator: (rule, value, callback) => {
		        if (!value) {
		          uToastRef.value.show({ message: '请输入姓名', type: 'error' });
		          callback(new Error()); // 触发验证失败
		        } else if (value.length < 2 || value.length > 5) {
		          uToastRef.value.show({ message: '姓名必须是2-5个字', type: 'error' });
		          callback(new Error());
		        } else {
		          callback(); // 验证通过
		        }
		      },
		      trigger: 'blur'
		    }
		  ],
		contact: [{ required: true, message: '请输入联系信息', trigger: 'blur' },
          { pattern: /^\d+$/, message: '联系信息只能是数字', trigger: 'blur' }],
		type: [{
			required: true,
			message: '请选择类型',
			trigger: 'change'
		}],
		description: [{
			required: true,
			message: '请输入描述',
			trigger: 'blur'
		}]
	};

	const showTypePicker = ref(false);

	const columns = reactive([
		[{
				label: '功能问题',
				id: 1
			},
			{
				label: '使用建议',
				id: 2
			}
		]
	]);
	const modeVulue = ref('');

	const confirm = (e) => {
		console.log('confirm', e);
		form.type.value = e.value[0].label;
		showTypePicker.value = false;
	};

	const fileList = ref([]);

	const uploadAction = ref('https://example.com/upload'); // 替换为实际的上传地址


	const afterRead = (event) => {
		// 处理上传逻辑
		// 这里只是示例，实际需要根据后端接口处理
		const file = event.file;
		fileList.value = [...fileList.value, file];
	};

	const submitFeedback = () => {
		uni.$u.formValidate('feedbackForm', (valid) => {
			if (valid) {
				// 提交表单数据
				console.log('表单数据:', form);
				showToast({
					title: '提交成功',
					type: 'success'
				});
				// 清空表单
				Object.keys(form).forEach(key => {
					form[key] = '';
				});
				fileList.value = [];
			}
		});
	};
</script>

<style scoped>
	.feedback-container {
		padding: 20px;
	}

	.feedback-title {
		font-size: 17px;
		font-weight: bold;
		margin-top: 76px;
		display: flex;
		flex-direction: column;
	}

	.feedback-desc {
		color: #999;
		font-size: 11px;
		margin-top: 5px;
		margin-bottom: 12px;
	}

	.submit-btn {
		margin-top: 23px;
	}

	.upload-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120px;
		height: 120px;
		border: 1px dashed #ddd;
		border-radius: 4px;
	}
</style>